<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目管理 - DevOps平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <style>
        .project-card {
            transition: all 0.3s ease;
        }
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .pipeline-stage {
            transition: all 0.3s ease;
        }
        .pipeline-stage.active {
            background: linear-gradient(45deg, #3b82f6, #1d4ed8);
            color: white;
            animation: pulse 2s infinite;
        }
        .pipeline-stage.success {
            background: linear-gradient(45deg, #10b981, #059669);
            color: white;
        }
        .pipeline-stage.failed {
            background: linear-gradient(45deg, #ef4444, #dc2626);
            color: white;
        }
        .pipeline-stage.pending {
            background: #f3f4f6;
            color: #6b7280;
        }
        .commit-timeline {
            position: relative;
        }
        .commit-timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e5e7eb;
        }
        .commit-item {
            position: relative;
            padding-left: 50px;
            margin-bottom: 20px;
        }
        .commit-item::before {
            content: '';
            position: absolute;
            left: 14px;
            top: 8px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #3b82f6;
            border: 3px solid white;
            box-shadow: 0 0 0 2px #3b82f6;
        }
        .branch-graph {
            font-family: monospace;
            font-size: 12px;
            line-height: 1.2;
        }
        .deployment-progress {
            animation: progress 3s ease-in-out infinite;
        }
        @keyframes progress {
            0% { width: 0%; }
            50% { width: 75%; }
            100% { width: 100%; }
        }
        .metric-number {
            font-size: 2.5rem;
            font-weight: bold;
            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body class="bg-base-100">
    <div id="projects">
        <!-- 导航栏 -->
        <div class="navbar bg-base-100 shadow-lg">
            <div class="navbar-start">
                <a href="index.html" class="btn btn-ghost text-xl">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回主页
                </a>
            </div>
            <div class="navbar-center">
                <h1 class="text-2xl font-bold">项目管理</h1>
            </div>
            <div class="navbar-end">
                <div class="flex items-center space-x-4">
                    <button class="btn btn-primary" @click="showCreateProject = true">
                        <i class="fas fa-plus mr-2"></i>
                        新建项目
                    </button>
                    <div class="dropdown dropdown-end">
                        <div tabindex="0" role="button" class="btn btn-ghost">
                            <i class="fas fa-filter"></i>
                        </div>
                        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                            <li><a @click="filterProjects('all')">全部项目</a></li>
                            <li><a @click="filterProjects('active')">活跃项目</a></li>
                            <li><a @click="filterProjects('archived')">已归档</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="container mx-auto px-4 py-8">
            <!-- 项目统计 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="card bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-xl">
                    <div class="card-body text-center">
                        <div class="metric-number text-white">{{ projectStats.total }}</div>
                        <h3 class="text-lg font-semibold">总项目数</h3>
                        <p class="text-sm opacity-90">包含所有状态项目</p>
                    </div>
                </div>
                <div class="card bg-gradient-to-r from-green-500 to-green-600 text-white shadow-xl">
                    <div class="card-body text-center">
                        <div class="metric-number text-white">{{ projectStats.active }}</div>
                        <h3 class="text-lg font-semibold">活跃项目</h3>
                        <p class="text-sm opacity-90">正在开发中</p>
                    </div>
                </div>
                <div class="card bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-xl">
                    <div class="card-body text-center">
                        <div class="metric-number text-white">{{ projectStats.deployments }}</div>
                        <h3 class="text-lg font-semibold">本月部署</h3>
                        <p class="text-sm opacity-90">成功部署次数</p>
                    </div>
                </div>
                <div class="card bg-gradient-to-r from-orange-500 to-orange-600 text-white shadow-xl">
                    <div class="card-body text-center">
                        <div class="metric-number text-white">{{ projectStats.successRate }}%</div>
                        <h3 class="text-lg font-semibold">成功率</h3>
                        <p class="text-sm opacity-90">部署成功率</p>
                    </div>
                </div>
            </div>

            <!-- 项目列表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-8">
                <div v-for="project in filteredProjects" :key="project.id" 
                     class="project-card card bg-base-100 shadow-xl cursor-pointer"
                     @click="selectProject(project)">
                    <div class="card-body">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="avatar">
                                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
                                        <i :class="project.icon" class="text-2xl text-primary"></i>
                                    </div>
                                </div>
                                <div>
                                    <h3 class="card-title text-lg">{{ project.name }}</h3>
                                    <p class="text-sm text-base-content/70">{{ project.description }}</p>
                                </div>
                            </div>
                            <div class="dropdown dropdown-end">
                                <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
                                    <i class="fas fa-ellipsis-v"></i>
                                </div>
                                <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                                    <li><a @click.stop="editProject(project)">编辑项目</a></li>
                                    <li><a @click.stop="deployProject(project)">立即部署</a></li>
                                    <li><a @click.stop="viewLogs(project)">查看日志</a></li>
                                    <li><a @click.stop="archiveProject(project)" class="text-warning">归档项目</a></li>
                                </ul>
                            </div>
                        </div>

                        <!-- 项目状态 -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="badge" :class="getStatusBadge(project.status)">
                                {{ project.status }}
                            </div>
                            <div class="text-sm text-base-content/70">
                                {{ project.lastDeploy }}
                            </div>
                        </div>

                        <!-- 技术栈 -->
                        <div class="flex flex-wrap gap-2 mb-4">
                            <div v-for="tech in project.technologies" :key="tech" 
                                 class="badge badge-outline badge-sm">
                                {{ tech }}
                            </div>
                        </div>

                        <!-- 项目指标 -->
                        <div class="grid grid-cols-3 gap-4 text-center">
                            <div>
                                <div class="text-lg font-bold text-primary">{{ project.commits }}</div>
                                <div class="text-xs text-base-content/70">提交数</div>
                            </div>
                            <div>
                                <div class="text-lg font-bold text-success">{{ project.deployments }}</div>
                                <div class="text-xs text-base-content/70">部署次数</div>
                            </div>
                            <div>
                                <div class="text-lg font-bold text-info">{{ project.uptime }}%</div>
                                <div class="text-xs text-base-content/70">可用性</div>
                            </div>
                        </div>

                        <!-- CI/CD状态 -->
                        <div class="mt-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-semibold">CI/CD状态</span>
                                <span class="text-xs text-base-content/70">{{ project.pipeline.lastRun }}</span>
                            </div>
                            <div class="flex space-x-1">
                                <div v-for="(stage, index) in project.pipeline.stages" :key="index"
                                     class="pipeline-stage flex-1 text-center py-2 px-1 rounded text-xs font-semibold"
                                     :class="stage.status">
                                    {{ stage.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 项目详情模态框 -->
            <div v-if="selectedProject" class="modal modal-open">
                <div class="modal-box w-11/12 max-w-6xl">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-bold text-2xl">{{ selectedProject.name }}</h3>
                        <button class="btn btn-sm btn-circle btn-ghost" @click="selectedProject = null">✕</button>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <!-- 项目信息 -->
                        <div class="lg:col-span-2 space-y-6">
                            <!-- 基本信息 -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h4 class="card-title">项目信息</h4>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div>
                                            <label class="label">项目名称</label>
                                            <div class="text-lg font-semibold">{{ selectedProject.name }}</div>
                                        </div>
                                        <div>
                                            <label class="label">项目状态</label>
                                            <div class="badge" :class="getStatusBadge(selectedProject.status)">
                                                {{ selectedProject.status }}
                                            </div>
                                        </div>
                                        <div>
                                            <label class="label">代码仓库</label>
                                            <a :href="selectedProject.repository" class="link link-primary" target="_blank">
                                                <i class="fab fa-git-alt mr-1"></i>
                                                {{ selectedProject.repository }}
                                            </a>
                                        </div>
                                        <div>
                                            <label class="label">部署环境</label>
                                            <div class="text-lg">{{ selectedProject.environment }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 最近提交 -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h4 class="card-title mb-4">最近提交</h4>
                                    <div class="commit-timeline">
                                        <div v-for="commit in selectedProject.recentCommits" :key="commit.id" class="commit-item">
                                            <div class="flex items-start justify-between">
                                                <div>
                                                    <div class="font-semibold">{{ commit.message }}</div>
                                                    <div class="text-sm text-base-content/70">
                                                        <i class="fas fa-user mr-1"></i>
                                                        {{ commit.author }} · {{ commit.time }}
                                                    </div>
                                                </div>
                                                <div class="text-xs font-mono bg-base-300 px-2 py-1 rounded">
                                                    {{ commit.hash }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 部署历史 -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h4 class="card-title mb-4">部署历史</h4>
                                    <div class="overflow-x-auto">
                                        <table class="table table-zebra">
                                            <thead>
                                                <tr>
                                                    <th>版本</th>
                                                    <th>环境</th>
                                                    <th>状态</th>
                                                    <th>部署时间</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="deployment in selectedProject.deploymentHistory" :key="deployment.id">
                                                    <td class="font-mono">{{ deployment.version }}</td>
                                                    <td>{{ deployment.environment }}</td>
                                                    <td>
                                                        <div class="badge" :class="getDeploymentStatusBadge(deployment.status)">
                                                            {{ deployment.status }}
                                                        </div>
                                                    </td>
                                                    <td>{{ deployment.time }}</td>
                                                    <td>
                                                        <div class="flex space-x-2">
                                                            <button class="btn btn-xs btn-outline">查看</button>
                                                            <button class="btn btn-xs btn-outline" v-if="deployment.status === '成功'">回滚</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 侧边栏 -->
                        <div class="space-y-6">
                            <!-- 快速操作 -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h4 class="card-title mb-4">快速操作</h4>
                                    <div class="space-y-2">
                                        <button class="btn btn-primary w-full" @click="deployProject(selectedProject)">
                                            <i class="fas fa-rocket mr-2"></i>
                                            立即部署
                                        </button>
                                        <button class="btn btn-outline w-full" @click="runTests(selectedProject)">
                                            <i class="fas fa-vial mr-2"></i>
                                            运行测试
                                        </button>
                                        <button class="btn btn-outline w-full" @click="viewLogs(selectedProject)">
                                            <i class="fas fa-file-alt mr-2"></i>
                                            查看日志
                                        </button>
                                        <button class="btn btn-outline w-full" @click="openRepository(selectedProject)">
                                            <i class="fab fa-git-alt mr-2"></i>
                                            打开仓库
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 项目统计 -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h4 class="card-title mb-4">项目统计</h4>
                                    <div class="space-y-4">
                                        <div class="flex justify-between">
                                            <span>代码行数</span>
                                            <span class="font-bold">{{ selectedProject.stats.linesOfCode }}</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span>测试覆盖率</span>
                                            <span class="font-bold">{{ selectedProject.stats.testCoverage }}%</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span>代码质量</span>
                                            <span class="font-bold">{{ selectedProject.stats.codeQuality }}</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <span>安全评分</span>
                                            <span class="font-bold">{{ selectedProject.stats.securityScore }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 团队成员 -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h4 class="card-title mb-4">团队成员</h4>
                                    <div class="space-y-3">
                                        <div v-for="member in selectedProject.team" :key="member.id" 
                                             class="flex items-center space-x-3">
                                            <div class="avatar">
                                                <div class="w-8 h-8 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm">
                                                    {{ member.name.charAt(0) }}
                                                </div>
                                            </div>
                                            <div>
                                                <div class="font-semibold text-sm">{{ member.name }}</div>
                                                <div class="text-xs text-base-content/70">{{ member.role }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 创建项目模态框 -->
            <div v-if="showCreateProject" class="modal modal-open">
                <div class="modal-box">
                    <h3 class="font-bold text-lg mb-4">创建新项目</h3>
                    <form @submit.prevent="createProject">
                        <div class="form-control mb-4">
                            <label class="label">项目名称</label>
                            <input type="text" v-model="newProject.name" class="input input-bordered" required>
                        </div>
                        <div class="form-control mb-4">
                            <label class="label">项目描述</label>
                            <textarea v-model="newProject.description" class="textarea textarea-bordered" rows="3"></textarea>
                        </div>
                        <div class="form-control mb-4">
                            <label class="label">代码仓库</label>
                            <input type="url" v-model="newProject.repository" class="input input-bordered" required>
                        </div>
                        <div class="form-control mb-4">
                            <label class="label">技术栈</label>
                            <select v-model="newProject.technology" class="select select-bordered" required>
                                <option value="">选择技术栈</option>
                                <option value="React">React</option>
                                <option value="Vue.js">Vue.js</option>
                                <option value="Node.js">Node.js</option>
                                <option value="Python">Python</option>
                                <option value="Java">Java</option>
                                <option value="Go">Go</option>
                            </select>
                        </div>
                        <div class="modal-action">
                            <button type="button" class="btn" @click="showCreateProject = false">取消</button>
                            <button type="submit" class="btn btn-primary">创建项目</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    selectedProject: null,
                    showCreateProject: false,
                    projectFilter: 'all',
                    newProject: {
                        name: '',
                        description: '',
                        repository: '',
                        technology: ''
                    },
                    projectStats: {
                        total: 12,
                        active: 8,
                        deployments: 45,
                        successRate: 96.8
                    },
                    projects: [
                        {
                            id: 'proj-001',
                            name: '电商前端应用',
                            description: '基于React的现代化电商平台前端',
                            icon: 'fab fa-react',
                            status: '开发中',
                            lastDeploy: '2小时前',
                            technologies: ['React', 'TypeScript', 'Tailwind'],
                            commits: 234,
                            deployments: 12,
                            uptime: 99.9,
                            repository: 'https://github.com/company/ecommerce-frontend',
                            environment: 'Production',
                            pipeline: {
                                lastRun: '2小时前',
                                stages: [
                                    { name: '构建', status: 'success' },
                                    { name: '测试', status: 'success' },
                                    { name: '部署', status: 'success' },
                                    { name: '验证', status: 'success' }
                                ]
                            },
                            recentCommits: [
                                {
                                    id: 'c1',
                                    message: '修复购物车计算错误',
                                    author: '张三',
                                    time: '2小时前',
                                    hash: 'a1b2c3d'
                                },
                                {
                                    id: 'c2',
                                    message: '添加商品搜索功能',
                                    author: '李四',
                                    time: '5小时前',
                                    hash: 'e4f5g6h'
                                },
                                {
                                    id: 'c3',
                                    message: '优化页面加载性能',
                                    author: '王五',
                                    time: '1天前',
                                    hash: 'i7j8k9l'
                                }
                            ],
                            deploymentHistory: [
                                {
                                    id: 'd1',
                                    version: 'v2.1.3',
                                    environment: 'Production',
                                    status: '成功',
                                    time: '2小时前'
                                },
                                {
                                    id: 'd2',
                                    version: 'v2.1.2',
                                    environment: 'Staging',
                                    status: '成功',
                                    time: '1天前'
                                },
                                {
                                    id: 'd3',
                                    version: 'v2.1.1',
                                    environment: 'Production',
                                    status: '失败',
                                    time: '3天前'
                                }
                            ],
                            stats: {
                                linesOfCode: '45,678',
                                testCoverage: 85,
                                codeQuality: 'A',
                                securityScore: 92
                            },
                            team: [
                                { id: 't1', name: '张三', role: '前端开发' },
                                { id: 't2', name: '李四', role: 'UI设计师' },
                                { id: 't3', name: '王五', role: '测试工程师' }
                            ]
                        },
                        {
                            id: 'proj-002',
                            name: '用户管理API',
                            description: 'Node.js微服务架构的用户管理系统',
                            icon: 'fab fa-node-js',
                            status: '生产环境',
                            lastDeploy: '1天前',
                            technologies: ['Node.js', 'Express', 'MongoDB'],
                            commits: 156,
                            deployments: 8,
                            uptime: 99.5,
                            repository: 'https://github.com/company/user-api',
                            environment: 'Production',
                            pipeline: {
                                lastRun: '1天前',
                                stages: [
                                    { name: '构建', status: 'success' },
                                    { name: '测试', status: 'success' },
                                    { name: '部署', status: 'success' },
                                    { name: '验证', status: 'success' }
                                ]
                            },
                            recentCommits: [
                                {
                                    id: 'c4',
                                    message: '增加用户权限验证',
                                    author: '赵六',
                                    time: '1天前',
                                    hash: 'm1n2o3p'
                                },
                                {
                                    id: 'c5',
                                    message: '优化数据库查询',
                                    author: '孙七',
                                    time: '2天前',
                                    hash: 'q4r5s6t'
                                }
                            ],
                            deploymentHistory: [
                                {
                                    id: 'd4',
                                    version: 'v1.5.2',
                                    environment: 'Production',
                                    status: '成功',
                                    time: '1天前'
                                },
                                {
                                    id: 'd5',
                                    version: 'v1.5.1',
                                    environment: 'Staging',
                                    status: '成功',
                                    time: '3天前'
                                }
                            ],
                            stats: {
                                linesOfCode: '23,456',
                                testCoverage: 92,
                                codeQuality: 'A+',
                                securityScore: 95
                            },
                            team: [
                                { id: 't4', name: '赵六', role: '后端开发' },
                                { id: 't5', name: '孙七', role: 'DevOps工程师' }
                            ]
                        },
                        {
                            id: 'proj-003',
                            name: '数据分析平台',
                            description: 'Python大数据分析和可视化平台',
                            icon: 'fab fa-python',
                            status: '测试中',
                            lastDeploy: '3天前',
                            technologies: ['Python', 'Django', 'PostgreSQL'],
                            commits: 89,
                            deployments: 5,
                            uptime: 98.2,
                            repository: 'https://github.com/company/data-platform',
                            environment: 'Staging',
                            pipeline: {
                                lastRun: '3天前',
                                stages: [
                                    { name: '构建', status: 'success' },
                                    { name: '测试', status: 'active' },
                                    { name: '部署', status: 'pending' },
                                    { name: '验证', status: 'pending' }
                                ]
                            },
                            recentCommits: [
                                {
                                    id: 'c6',
                                    message: '添加数据可视化图表',
                                    author: '周八',
                                    time: '3天前',
                                    hash: 'u7v8w9x'
                                }
                            ],
                            deploymentHistory: [
                                {
                                    id: 'd6',
                                    version: 'v0.8.1',
                                    environment: 'Staging',
                                    status: '进行中',
                                    time: '3天前'
                                }
                            ],
                            stats: {
                                linesOfCode: '34,567',
                                testCoverage: 78,
                                codeQuality: 'B+',
                                securityScore: 88
                            },
                            team: [
                                { id: 't6', name: '周八', role: '数据工程师' },
                                { id: 't7', name: '吴九', role: '算法工程师' }
                            ]
                        },
                        {
                            id: 'proj-004',
                            name: '移动端应用',
                            description: 'React Native跨平台移动应用',
                            icon: 'fas fa-mobile-alt',
                            status: '已归档',
                            lastDeploy: '2周前',
                            technologies: ['React Native', 'Redux', 'Firebase'],
                            commits: 312,
                            deployments: 15,
                            uptime: 97.8,
                            repository: 'https://github.com/company/mobile-app',
                            environment: 'Archived',
                            pipeline: {
                                lastRun: '2周前',
                                stages: [
                                    { name: '构建', status: 'success' },
                                    { name: '测试', status: 'success' },
                                    { name: '部署', status: 'success' },
                                    { name: '验证', status: 'success' }
                                ]
                            },
                            recentCommits: [
                                {
                                    id: 'c7',
                                    message: '最终版本发布',
                                    author: '郑十',
                                    time: '2周前',
                                    hash: 'y1z2a3b'
                                }
                            ],
                            deploymentHistory: [
                                {
                                    id: 'd7',
                                    version: 'v3.0.0',
                                    environment: 'Production',
                                    status: '成功',
                                    time: '2周前'
                                }
                            ],
                            stats: {
                                linesOfCode: '67,890',
                                testCoverage: 88,
                                codeQuality: 'A',
                                securityScore: 90
                            },
                            team: [
                                { id: 't8', name: '郑十', role: '移动开发' }
                            ]
                        }
                    ]
                }
            },
            computed: {
                filteredProjects() {
                    if (this.projectFilter === 'all') return this.projects;
                    if (this.projectFilter === 'active') {
                        return this.projects.filter(p => p.status === '开发中' || p.status === '生产环境' || p.status === '测试中');
                    }
                    if (this.projectFilter === 'archived') {
                        return this.projects.filter(p => p.status === '已归档');
                    }
                    return this.projects;
                }
            },
            methods: {
                selectProject(project) {
                    this.selectedProject = project;
                },
                filterProjects(filter) {
                    this.projectFilter = filter;
                },
                getStatusBadge(status) {
                    const badges = {
                        '开发中': 'badge-primary',
                        '生产环境': 'badge-success',
                        '测试中': 'badge-warning',
                        '已归档': 'badge-ghost'
                    };
                    return badges[status] || 'badge-ghost';
                },
                getDeploymentStatusBadge(status) {
                    const badges = {
                        '成功': 'badge-success',
                        '失败': 'badge-error',
                        '进行中': 'badge-warning'
                    };
                    return badges[status] || 'badge-ghost';
                },
                editProject(project) {
                    alert(`编辑项目: ${project.name}`);
                },
                deployProject(project) {
                    if (confirm(`确定要部署项目 "${project.name}" 吗？`)) {
                        alert(`正在部署项目: ${project.name}`);
                        // 模拟部署过程
                        setTimeout(() => {
                            alert(`项目 "${project.name}" 部署成功！`);
                        }, 2000);
                    }
                },
                runTests(project) {
                    alert(`正在运行测试: ${project.name}`);
                },
                viewLogs(project) {
                    window.open('logs.html', '_blank');
                },
                openRepository(project) {
                    window.open(project.repository, '_blank');
                },
                archiveProject(project) {
                    if (confirm(`确定要归档项目 "${project.name}" 吗？`)) {
                        project.status = '已归档';
                        alert(`项目 "${project.name}" 已归档`);
                    }
                },
                createProject() {
                    if (this.newProject.name && this.newProject.repository) {
                        const newProj = {
                            id: 'proj-' + Date.now(),
                            name: this.newProject.name,
                            description: this.newProject.description,
                            icon: 'fas fa-code',
                            status: '开发中',
                            lastDeploy: '刚刚创建',
                            technologies: [this.newProject.technology],
                            commits: 0,
                            deployments: 0,
                            uptime: 0,
                            repository: this.newProject.repository,
                            environment: 'Development',
                            pipeline: {
                                lastRun: '未运行',
                                stages: [
                                    { name: '构建', status: 'pending' },
                                    { name: '测试', status: 'pending' },
                                    { name: '部署', status: 'pending' },
                                    { name: '验证', status: 'pending' }
                                ]
                            },
                            recentCommits: [],
                            deploymentHistory: [],
                            stats: {
                                linesOfCode: '0',
                                testCoverage: 0,
                                codeQuality: 'N/A',
                                securityScore: 0
                            },
                            team: []
                        };
                        
                        this.projects.unshift(newProj);
                        this.projectStats.total++;
                        this.projectStats.active++;
                        
                        // 重置表单
                        this.newProject = {
                            name: '',
                            description: '',
                            repository: '',
                            technology: ''
                        };
                        this.showCreateProject = false;
                        
                        alert(`项目 "${newProj.name}" 创建成功！`);
                    }
                }
            }
        }).mount('#projects');
    </script>
</body>
</html>